<template>
    <div ref="alLine"></div>
</template>

<script>
  import { Line } from '@antv/g2plot';
  import {paramDeal} from "../../utils/util";
    export default {
      name: "alLine",
      data(){
        return{
        }
      },
      props:{
        dataList:Array,//数据源
        title:String,//标题
        describe:String,//图表描述
      },
      methods:{
        initLine(){
          //获取数组对象的key值
          const arrKey = paramDeal.arrKey(this.dataList);

          const linePlot = new Line(this.$refs.alLine, {

            title: {//图形标题配置
              visible: this.title?true:false,
              text: this.title,
            },
            description: {//图形描述配置
              visible: this.describe?true:false,
              text: this.describe,
            },
            tickLine:{//图形刻度线配置
              visible:false,
            },
            forceFit: true,
            padding: 'auto',
            data:this.dataList,
            xField: arrKey[0],
            yField: arrKey[1],
            point: {
              visible: true,
            },
            label: {//文本配置
              visible: true,
              type: 'point',
            },
            legend:{//配置图列
              visible:true,
              position:'bottom-center',
              offsetX:50,
              text:{
                style:{
                  fontSize:12,
                  fill:"#000",
                },
              },
            },
          });
          linePlot.render();
        },
      },
      mounted() {
        this.initLine();
      }
    }
</script>

<style scoped>

</style>
